<template>
	<div class="authorization">
		<div class="header">
			<div class="left">
				<img src="../../assets/img/service.png" alt="" />
				<span class="title">客服中心</span>
			</div>
		</div>
		<div class="content">
			<div class="desc">
				<span>1、如使用中有紧急问题请致电：400-005-8008</span>
				<span>2、如需其他帮助请留言反馈，会有专人客服进行处理</span>
			</div>
			<div class="desc-detail">
				<a-descriptions
					bordered
					:column="1"
					:labelStyle="{
						background: '#F3F3F3',
						border: '1px solid #CACACA',
					}"
					:contentStyle="{
						border: '1px solid #CACACA',
					}"
				>
					<a-descriptions-item
						label="加密锁序列号"
						style="position: relative"
					>
						<EditSelect
							ref="serialValue"
							:selectData="sns"
							:value="fromData.serial"
							@changeValue="changeValue"
						/>
						<img
							src="../../assets/img/shuaxin.png"
							alt=""
							class="resetBtn"
							@click="reset"
						/>
						<!-- <icon-font type="icon-shuaxin"></icon-font> -->
					</a-descriptions-item>
					<a-descriptions-item label="申请人">
						<a-input
							v-model:value="fromData.callUserName"
							placeholder="请输入联系人"
							class="form-input"
					/></a-descriptions-item>
					<a-descriptions-item label="联系电话"
						><a-input
							v-model:value="fromData.tel"
							type="number"
							placeholder="请输入联系电话"
							class="form-input"
					/></a-descriptions-item>
					<a-descriptions-item label="短信验证码">
						<div class="message">
							<a-input
								v-model:value="fromData.code"
								placeholder="请输入验证码"
							/>
							<a-button @click="smsCode" class="msgBtn">{{
								codeNum != 60
									? '倒计时' + codeNum
									: '发送验证码'
							}}</a-button>
						</div>
					</a-descriptions-item>
					<a-descriptions-item label="问题描述" :span="2">
						<a-textarea
							v-model:value="fromData.description"
							placeholder="请输入描述,3000个字以内"
							maxlength="3000"
							:rows="7"
							style="margin: 10px 0 0 0"
						/>
						<!-- <TEditor
							class="editContent"
							ref="editor"
							name="PreparationOfInstructions"
						/> -->
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<div class="btn-list">
				<a-button type="primary" :loading="loading" @click="submit"
					>提交</a-button
				>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import TEditor from '@/components/RichText/TEditor.vue';
import EditSelect from '@/components/EditSelect.vue';
import { requestHttp } from '@/api/main.js';
import { notification } from 'ant-design-vue';
import { message } from 'ant-design-vue';
const editor = ref();
let loading = ref(false);
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const serialValue = ref();
const fileList = ref([
	{
		uid: '-1',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-2',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-3',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-4',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-xxx',
		percent: 50,
		name: 'image.png',
		status: 'uploading',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-5',
		name: 'image.png',
		status: 'error',
	},
]);
let fromData = ref({
	serial: null,
	status: '0',
	callUserName: '',
	tel: '',
	description: '',
	code: '',
});
let sns = ref([]);
let getBaseInfo = (id) => {
	requestHttp('controller.admin.getHardwareBySerial', { serial: `${id}` }).then(
		(res) => {
			console.log(' res.data.result', res.data?.result);
			if (res.data?.result) {
				fromData.value.callUserName =
					res.data.result.enterprise.callUserName;
				fromData.value.tel = res.data.result.enterprise.tel;
				selectBaseInfo.value = res.data.result;
			} else {
				fromData.value.callUserName = '';
				fromData.value.tel = '';
			}
		}
	);
};
const changeValue = (value) => {
	fromData.value.serial = value;
	getBaseInfo(value);
};
const openNotificationWithIcon = (error) => {
	notification['error']({
		message: '错误信息',
		description: error,
	});
};
const codeNum = ref(60);
let clearId = null;
let smsCode = async () => {
	if (codeNum.value != 60) return;
	if (fromData.value.tel) {
		let res = await requestHttp('controller.admin.smsCode', {
			tel: fromData.value.tel,
		});
		clearId = setInterval(() => {
			codeNum.value--;
			if (codeNum.value == 0) {
				clearInterval(clearId);
				codeNum.value = 60;
			}
		}, 1000);
	}
};
let getSn = () => {
	requestHttp('controller.manager.getSn').then((res) => {
		let arr = [];
		res.data.forEach(item => {
			arr.push(item+"");
		});
		sns.value = arr;
	});
};
/**
 * 提交操作
 */
const submit = async () => {
	fromData.value.serial = serialValue.value.value;
	// const remake = await editor?.value.saveEditor();
	if (!fromData.value.serial) {
		return openNotificationWithIcon('请选择设备');
	}
	if (!fromData.value.callUserName) {
		return openNotificationWithIcon('请填写申请人');
	}
	if (!fromData.value.tel) {
		return openNotificationWithIcon('请填写联系电话');
	}
	if (!fromData.value.code) {
		return openNotificationWithIcon('请填写验证码');
	}
	// if (!fromData.value.description) {
	// 	return openNotificationWithIcon("请填写描述信息");
	// }
	if (!fromData.value.description) {
		return openNotificationWithIcon('请填写描述信息');
	}
	// fromData.value.description = remake;
	loading.value = true;

	console.log('++++++++++++++++++++', fromData.value);
	requestHttp('controller.admin.kefu', fromData.value).then((res) => {
		loading.value = false;

		let dd = res.data;
		if (dd.status != 200) {
			openNotificationWithIcon(dd.message);
		} else {
			// editor?.value.setReset();
			serialValue.value.reset();
			message.success('提交成功，请等待平台处理');
			reset();
		}
	});
};
const reset = () => {
	fromData.value.serial = null;
	fromData.value.callUserName = '';
	fromData.value.tel = '';
	fromData.value.description = '';
	fromData.value.code = '';
	// editor?.value.setReset();
	serialValue.value.reset();
};
function getBase64(file) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = () => resolve(reader.result);
		reader.onerror = (error) => reject(error);
	});
}

const handleCancel = () => {
	previewVisible.value = false;
	previewTitle.value = '';
};

const handlePreview = async (file) => {
	if (!file.url && !file.preview) {
		file.preview = await getBase64(file.originFileObj);
	}
	previewImage.value = file.url || file.preview;
	previewVisible.value = true;
	previewTitle.value =
		file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
onMounted(() => {
	getSn();
});
</script>

<style lang="scss" scoped>
.authorization {
	background: #f7f7f7;
	height: calc(100vh - 50px);
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120px;
		padding: 0 32px 0 60px;
		background: url('../../assets/img/user-bg.png');

		.title {
			font-size: 30px;
			color: #ffffff;
			margin-left: 14px;
		}

		.ant-btn {
			background: transparent;
			color: #ffffff;
		}
	}

	.content {
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
		padding: 20px 32px 20px 60px;
		height: calc(100% - 120px);
		overflow: auto;
		.desc {
			span {
				display: block;
				font-size: 12px;
				color: #333333;
				margin-bottom: 10px;
			}
			margin-bottom: 10px;
		}
		.desc-detail {
			width: 100%;
			.message {
				position: relative;
				// display: flex;
				// justify-content: space-between;
				.msgBtn {
					right: 10px;
					top: 0;
					position: absolute;
					border: 1px solid #6590fc;

					color: #287cfa;
				}
			}
			:deep(.ant-descriptions-row) {
				height: 44px;
				line-height: 44px;
			}
			:deep(.ant-descriptions-row .ant-descriptions-item-label) {
				text-align: right;
				padding: 0 24px;
			}
			:deep(.ant-descriptions-row .ant-descriptions-item-content) {
				text-align: center;
				// padding: 0 24px;
				padding: 0 0px;
			}
			.ant-input {
				width: 100%;
				text-align: center;
				border: none;
				&:focus {
					box-shadow: none !important;
				}
				.ant-input-focused {
					box-shadow: none !important;
				}
			}
			.ant-input:click .ant-btn {
				border: 1px solid #6590fc;
				color: #287cfa;
			}
			.editContent {
				width: 100%;
			}
		}
		.btn-list {
			text-align: right;
			margin-top: 36px;
		}
	}
	.resetBtn {
		width: 17px;
		height: 17px;
		position: absolute;
		z-index: 100;
		right: 44px;
		top: 12px;
	}
}
</style>
